<template>
    <div class="main">
        <!---------------------乐章板块  start -------------------->
        <div class="product p-yz" id="p_yz">
            <a class="p-title" href="#">
                <span class="p-title-c">乐章</span>
                <div class="icon"><img src="" alt=""/></div>
                <span class="p-title-e">MOVEMENT</span>
            </a>
            <div class="p-details">
                <div class="swiper-container" id="swiper-container2">
                    <div class="swiper-wrapper">
                        <!------------------------ 第一屏4个  start----------------------->
                        <div class="swiper-slide swiper-p-yz">                                                         <!--产品展示里面的大块,可以动态添加,里面的数据来自后台(需适配)-->
                            <ul class="clearFix">
                                <li class="p-yz-cont clearFix">
                                    <div class="p-yz-cont-L">
                                        <a href="#"><img class="artical-pic" src="" alt=""/></a>
                                    </div>
                                    <div class="p-yz-cont-R">
                                        <a href="#" class="artical-title"></a>
                                        <a href="#" class="author"><span></span></a>
                                        <p class="artical-cont"></p>
                                        <div class="time"> <i class="time-icon"></i><i class="p-yz-date"></i><i class="p-yz-hour_minute1"></i></div>
                                        <div class="zan">
                                            <i class="zan-num"></i>
                                            <i class="zan-icon"></i>
                                            <i class="pl-num"></i>
                                            <i class="pl-icon"></i>
                                        </div>
                                    </div>
                                </li>
                                <!-- <li class="p-yz-cont clearFix">
                                    <div class="p-yz-cont-L">
                                        <a href="#"><img class="artical-pic" src="" alt=""/></a>
                                    </div>
                                    <div class="p-yz-cont-R">
                                        <a href="#" class="artical-title"></a>
                                        <a href="#" class="author"><span></span></a>
                                        <p class="artical-cont"></p>
                                        <div class="time"> <i class="time-icon"></i><i class="p-yz-date"></i><i class="p-yz-hour_minute1"></i></div>
                                        <div class="zan">
                                            <i class="zan-num"></i>
                                            <i class="zan-icon"></i>
                                            <i class="pl-num"></i>
                                            <i class="pl-icon"></i>
                                        </div>
                                    </div>
                                </li>
                                <li class="p-yz-cont clearFix">
                                    <div class="p-yz-cont-L">
                                        <a href="#"><img class="artical-pic" src="" alt=""/></a>
                                    </div>
                                    <div class="p-yz-cont-R">
                                        <a href="#" class="artical-title"></a>
                                        <a href="#" class="author"><span></span></a>
                                        <p class="artical-cont"></p>
                                        <div class="time"> <i class="time-icon"></i><i class="p-yz-date"></i><i class="p-yz-hour_minute1"></i></div>
                                        <div class="zan">
                                            <i class="zan-num"></i>
                                            <i class="zan-icon"></i>
                                            <i class="pl-num"></i>
                                            <i class="pl-icon"></i>
                                        </div>
                                    </div>
                                </li>
                                <li class="p-yz-cont clearFix">
                                    <div class="p-yz-cont-L">
                                        <a href="#"><img class="artical-pic" src="" alt=""/></a>
                                    </div>
                                    <div class="p-yz-cont-R">
                                        <a href="#" class="artical-title"></a>
                                        <a href="#" class="author"><span></span></a>
                                        <p class="artical-cont"></p>
                                        <div class="time"> <i class="time-icon"></i><i class="p-yz-date"></i><i class="p-yz-hour_minute1"></i></div>
                                        <div class="zan">
                                            <i class="zan-num"></i>
                                            <i class="zan-icon"></i>
                                            <i class="pl-num"></i>
                                            <i class="pl-icon"></i>
                                        </div>
                                    </div>
                                </li> -->
                            </ul>
                        </div>
                        <!------------------------ 第一屏4个  end----------------------->

                        <!------------------------ 第二屏4个  start----------------------->
                        <div class="swiper-slide swiper-p-yz">                        <!--产品展示里面的大块,可以动态添加,里面的数据来自后台(需适配)-->
                            <ul class="clearFix">
                                <li class="p-yz-cont clearFix">
                                    <div class="p-yz-cont-L">
                                        <a href="#"><img class="artical-pic" src="" alt=""/></a>
                                    </div>
                                    <div class="p-yz-cont-R">
                                        <a href="#" class="artical-title"></a>
                                        <a href="#" class="author"><span></span></a>
                                        <p class="artical-cont"></p>
                                        <div class="time"> <i class="time-icon"></i><i class="p-yz-date"></i><i class="p-yz-hour_minute1"></i></div>
                                        <div class="zan">
                                            <i class="zan-num"></i>
                                            <i class="zan-icon"></i>
                                            <i class="pl-num"></i>
                                            <i class="pl-icon"></i>
                                        </div>
                                    </div>
                                </li>
                                <li class="p-yz-cont clearFix">
                                    <div class="p-yz-cont-L">
                                        <a href="#"><img class="artical-pic" src="" alt=""/></a>
                                    </div>
                                    <div class="p-yz-cont-R">
                                        <a href="#" class="artical-title"></a>
                                        <a href="#" class="author"><span></span></a>
                                        <p class="artical-cont"></p>
                                        <div class="time"> <i class="time-icon"></i><i class="p-yz-date"></i><i class="p-yz-hour_minute1"></i></div>
                                        <div class="zan">
                                            <i class="zan-num"></i>
                                            <i class="zan-icon"></i>
                                            <i class="pl-num"></i>
                                            <i class="pl-icon"></i>
                                        </div>
                                    </div>
                                </li>
                                <li class="p-yz-cont clearFix">
                                    <div class="p-yz-cont-L">
                                        <a href="#"><img class="artical-pic" src="" alt=""/></a>
                                    </div>
                                    <div class="p-yz-cont-R">
                                        <a href="#" class="artical-title"></a>
                                        <a href="#" class="author"><span></span></a>
                                        <p class="artical-cont"></p>
                                        <div class="time"> <i class="time-icon"></i><i class="p-yz-date"></i><i class="p-yz-hour_minute1"></i></div>
                                        <div class="zan">
                                            <i class="zan-num"></i>
                                            <i class="zan-icon"></i>
                                            <i class="pl-num"></i>
                                            <i class="pl-icon"></i>
                                        </div>
                                    </div>
                                </li>
                                <li class="p-yz-cont clearFix">
                                    <div class="p-yz-cont-L">
                                        <a href="#"><img class="artical-pic" src="" alt=""/></a>
                                    </div>
                                    <div class="p-yz-cont-R">
                                        <a href="#" class="artical-title"></a>
                                        <a href="#" class="author"><span></span></a>
                                        <p class="artical-cont"></p>
                                        <div class="time"> <i class="time-icon"></i><i class="p-yz-date"></i><i class="p-yz-hour_minute1"></i></div>
                                        <div class="zan">
                                            <i class="zan-num"></i>
                                            <i class="zan-icon"></i>
                                            <i class="pl-num"></i>
                                            <i class="pl-icon"></i>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <!------------------------ 第二屏4个  end----------------------->

                        <!------------------------ 第三屏4个  start----------------------->
                        <div class="swiper-slide swiper-p-yz">                        <!--产品展示里面的大块,可以动态添加,里面的数据来自后台(需适配)-->
                            <ul class="clearFix">
                                <li class="p-yz-cont clearFix">
                                    <div class="p-yz-cont-L">
                                        <a href="#"><img class="artical-pic" src="" alt=""/></a>
                                    </div>
                                    <div class="p-yz-cont-R">
                                        <a href="#" class="artical-title"></a>
                                        <a href="#" class="author"><span></span></a>
                                        <p class="artical-cont"></p>
                                        <div class="time"> <i class="time-icon"></i><i class="p-yz-date"></i><i class="p-yz-hour_minute1"></i></div>
                                        <div class="zan">
                                            <i class="zan-num"></i>
                                            <i class="zan-icon"></i>
                                            <i class="pl-num"></i>
                                            <i class="pl-icon"></i>
                                        </div>
                                    </div>
                                </li>
                                <li class="p-yz-cont clearFix">
                                    <div class="p-yz-cont-L">
                                        <a href="#"><img class="artical-pic" src="" alt=""/></a>
                                    </div>
                                    <div class="p-yz-cont-R">
                                        <a href="#" class="artical-title"></a>
                                        <a href="#" class="author"><span></span></a>
                                        <p class="artical-cont"></p>
                                        <div class="time"> <i class="time-icon"></i><i class="p-yz-date"></i><i class="p-yz-hour_minute1"></i></div>
                                        <div class="zan">
                                            <i class="zan-num"></i>
                                            <i class="zan-icon"></i>
                                            <i class="pl-num"></i>
                                            <i class="pl-icon"></i>
                                        </div>
                                    </div>
                                </li>
                                <li class="p-yz-cont clearFix">
                                    <div class="p-yz-cont-L">
                                        <a href="#"><img class="artical-pic" src="" alt=""/></a>
                                    </div>
                                    <div class="p-yz-cont-R">
                                        <a href="#" class="artical-title"></a>
                                        <a href="#" class="author"><span></span></a>
                                        <p class="artical-cont"></p>
                                        <div class="time"> <i class="time-icon"></i><i class="p-yz-date"></i><i class="p-yz-hour_minute1"></i></div>
                                        <div class="zan">
                                            <i class="zan-num"></i>
                                            <i class="zan-icon"></i>
                                            <i class="pl-num"></i>
                                            <i class="pl-icon"></i>
                                        </div>
                                    </div>
                                </li>
                                <li class="p-yz-cont clearFix">
                                    <div class="p-yz-cont-L">
                                        <a href="#"><img class="artical-pic" src="" alt=""/></a>
                                    </div>
                                    <div class="p-yz-cont-R">
                                        <a href="#" class="artical-title"></a>
                                        <a href="#" class="author"><span></span></a>
                                        <p class="artical-cont"></p>
                                        <div class="time"> <i class="time-icon"></i><i class="p-yz-date"></i><i class="p-yz-hour_minute1"></i></div>
                                        <div class="zan">
                                            <i class="zan-num"></i>
                                            <i class="zan-icon"></i>
                                            <i class="pl-num"></i>
                                            <i class="pl-icon"></i>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <!------------------------ 第三屏4个  end----------------------->
                    </div>
                    <!--小圆点 -->
                    <div class="swiper-pagination"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import api from "../../api";
export default {
  data() {
    return {
        yzlist:[
            
        ]
    };
  },
  mounted() {
    api.getyzUrl().then((res) => {
        var arr=res.data.movement;//[{},{},{},{},{},{},....]
        var n=-1;//变量--取数据 
        // console.log(arr);
        //1.求  多少个容器swiper-slide 每一屏显示4个li
        var num=Math.ceil(arr.length/4);
        for(var i=0;i<num;i++){
            var str=arr.slice(0,4); 
            this.yzlist.push(str)
                    
        }
        console.log( this.yzlist);
    });
  },
};
</script>

<style scoped>
.swiper-slide {
  width: 100%;
}

.swiper-slide img {
  width: 100%;
  height: 500px;
}

.swiper-container-horizontal > .swiper-pagination-bullets {
  text-align: center;
}
.p-yq .swiper-wrapper {
  margin-bottom: 70px;
}
.p-ll .swiper-wrapper {
  margin-bottom: 70px;
}
.p-yj .swiper-wrapper {
  margin-bottom: 70px;
}
.swiper-container-horizontal
  > .swiper-pagination-bullets
  .swiper-pagination-bullet {
  margin: 0 4px;
}
.swiper-pagination-bullet {
  width: 15px;
  height: 15px;
  display: inline-block;
  border-radius: 100%;
  background: #a8e4c8;
  opacity: 1;
}
#swiper-pagination1 .swiper-pagination-bullet {
  background: #4e4e4e;
}
.swiper-pagination-bullet-active {
  background: #52c58c;
}
#swiper-pagination1 .swiper-pagination-bullet-active {
  background: #52c58c;
}
.main{
    width:1200px;
    min-width:1200px;
    margin:0 auto;
}
.product{
    border: 1px solid transparent;
}
.product .p-title{
    width:140px;
    margin:40px auto 0;
    display:block;
    text-align:center;
    color: #292929;
}
.product .p-title .p-title-c{
    font-size:24px;
    display:block;
    margin-bottom:5px;
    position:relative;
}
.product .p-title .icon{
    text-align:center;
    position:relative;
}
.product .p-title .icon::before{
    content:"";
    display:block;
    width:48px;
    height:1px;
    position:absolute;
    left:0;
    top:8px;
    background:#e0e0e0;
}
.product .p-title .icon::after{
    content: "";
    display: block;
    width: 48px;
    height: 1px;
    position: absolute;
    right: -2px;
    top: 8px;
    background: #e0e0e0;
}

.product .p-title .icon img{
    margin-bottom:5px;
}
.product .p-title .p-title-e{
    font-size:14px;
    display:block;
    font-family: Arial;
    margin-bottom:5px;
    position:relative;
}
</style>